<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我要买号-账号列表</title>

    <link rel="stylesheet" href="./js/lib/bootstrap-4.6.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./js/lib/paginationself.css">
    <link rel="stylesheet" href="./styles/count-list.css">

    <script src="./js/lib/jquery-3.7.1.min.js"></script>
    <script src="./js/lib/bootstrap-4.6.2/js/bootstrap.min.js"></script>
    <script src="./js/lib/paginationself.js"></script>
</head>

<body>
    <div class="home-container">
        <!-- 头部 -->
        <!-- 导航头 -->
        <div class="wrap-bar">
            <!-- 内容版心区域 -->
            <div class="layout-1226 welcome-wrap">
                <!-- 欢迎语 -->
                <div class="welcome-word">
                    你好，欢迎来到辉光网络
                </div>
                <!-- 右侧用户 -->
                <div class="bar-user">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="">个人中心</a>
                </div>
            </div>
        </div>

        <!-- 固定菜单 -->
        <div class="home-tool-bar">
            <div class="top-title">快捷导航</div>
            <div class="tool-list">
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_01.png" class="static">
                    <span class="tool-title">购物车</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_02.png" class="static">
                    <span class="tool-title">我要出售</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_03.png" class="static">
                    <span class="tool-title">投诉售后</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_04.png" class="static">
                    <span class="tool-title">帮助中心</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_05.png" class="static">
                    <span class="tool-title">微信咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_06.png" class="static">
                    <span class="tool-title">在线咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_07.png" class="static">
                    <span class="tool-title">商务合作</span>
                </a>
            </div>
        </div>
        <div class="layout-1226">
            <div class="wrap-header">
                <!-- logo -->
                <a href="javaScript:;">
                    <img src="/images/logo-hg.jpg" alt="huiguang">
                </a>
                <!-- 搜索框 -->
                <div class="wrap-select">
                    <div class="input-group">
                        <select class="form-control">
                            <option selected>王者荣耀</option>
                            <option value="1">逆水寒</option>
                            <option value="2">绝地求生</option>
                            <option value="3">我的世界</option>
                        </select>
                        <input type="text" class="form-control" placeholder="请搜索你喜欢的游戏..." />
                        <div class="input-group-append">
                            <button type="button" class="btn btn-primary">搜索</button>
                        </div>
                    </div>
                    <div class="hot-game d-flex">
                        <span>热门游戏：</span>
                        <ul class="d-flex">
                            <li>穿越火线</li>
                            <li>枪战王者</li>
                            <li>王者荣耀</li>
                            <li>地下城与勇士</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="nav-wrap">
                <ul>
                    <li>
                        <a href="javaScript:;">
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="javaScript:;">
                            <span>我要买号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>我要卖号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>联系我们</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>帮助中心</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 内容主体 -->
            <div class="nav-link">
                <span>您的位置：</span>
                <span><a href="#">首页 > </a></span>
                <span><a href="#">全部游戏 > </a></span>
                <span><a href="#" class="current">账号列表</a></span>
            </div>
            <div class="search-wrap">
                <div class="search-top">
                    <div class="search-top-left">筛选条件:</div>
                    <div class="search-top-right">
                        <img src="./images/clear.png" alt="">
                        <span>清空筛选条件</span>
                    </div>
                </div>
                <div class="search-content">
                    <!--侧边导航-->
                    <div id="searchPanel">
                        <!-- ***** 导航 ***** -->
                        <ul class="search">
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">价格区间：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>不限</li>
                                        <li>500元以下</li>
                                        <li>500-1000</li>
                                        <li>1000-3000</li>
                                        <li>3000-5000</li>
                                        <li>5000以上</li>
                                    </ul>
                                </div>
                                <div class="other_search"></div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">服务器：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>东部战区</li>
                                        <li>西部战区</li>
                                        <li>南部战区</li>
                                        <li>北部战区</li>
                                        <li>河南大区【北部】</li>
                                        <li>北京大区【北部】</li>
                                        <li>山东大区【北部】</li>
                                  
                                    </ul>
                                </div>
                                <div class="other_search">
                                    <ul>
                                        <li>河北大区【北部】</li>
                                        <li>山西大区【北部】</li>
                                        <li>辽宁大区【北部】</li>
                                        <li>北方大区【北部】</li>
                                        <li>吉林大区【北部】</li>
                                        <li>黑龙江区【北部】</li>
                                        <li>安徽大区【东部】</li>
                                        <li>福建大区【东部】</li>
                                        <li>上海大区【东部】</li>
                                        <li>浙江大区【东部】</li>
                                        <li>江苏大区【东部】</li>
                                        <li>江西大区【南部】</li>
                                        <li>南方大区【南部】</li>
                                        <li>湖南大区【南部】</li>
                                        <li>湖北大区【南部】</li>
                                        <li>广东大区【南部】</li>
                                        <li>广西大区【南部】</li>
                                        <li>四川大区【西部】</li>
                                        <li>重庆大区【西部】</li>
                                        <li>云南大区【西部】</li>
                                        <li>陕西大区【西部】</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">账号类型：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>爆破号</li>
                                        <li>生化号</li>
                                        <li>爆破生化号</li>
                                        <li>VIP6</li>
                                        <li>VIP5</li>
                                        <li>VIP4</li>
                                        <li>VIP0</li>
                                    </ul>
                                </div>
                                <div class="other_search"></div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">军衔/排位等级：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>大校--上将</li>
                                        <li>元帅--高阶大元帅</li>
                                        <li>元首--大元首</li>
                                        <li>无段位--精英</li>
                                        <li>专家--宗师</li>
                                        <li>传奇--荣耀枪王</li>
                                        <li>枪王之王</li>
                                    </ul>
                                </div>
                                <div class="other_search"></div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">周年套装：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>竞技荣光套</li>
                                        <li>荣耀世冠套</li>
                                        <li>雷暴套</li>
                                        <li>雷霆套</li>
                                        <li>堕天神套</li>
                                        <li>幻灵套</li>
                                        <li>夜魔套</li>
                                        <li>电竞装甲</li>
                                    </ul>
                                </div>
                                <div class="other_search">
                                    <ul>
                                        <li>雷霆王者套</li>
                                        <li>幻兽套</li>
                                        <li>神工天巧套装</li>
                                    </ul>
                                </div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">账号类型：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>爆破号</li>
                                        <li>生化号</li>
                                        <li>爆破生化号</li>
                                        <li>VIP6</li>
                                        <li>VIP5</li>
                                        <li>VIP4</li>
                                        <li>VIP0</li>
                                    </ul>
                                </div>
                                <div class="other_search"></div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">军衔/排位等级：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>大校--上将</li>
                                        <li>元帅--高阶大元帅</li>
                                        <li>元首--大元首</li>
                                        <li>无段位--精英</li>
                                        <li>专家--宗师</li>
                                        <li>传奇--荣耀枪王</li>
                                        <li>枪王之王</li>
                                    </ul>
                                </div>
                                <div class="other_search"></div>
                            </li>
                            <li class="subsearch">
                                <div class="df-search">
                                    <div class="search-label">周年套装：</div>
                                    <img class="search-1" src="./images/more.png" alt="">
                                    <ul class="d-flex align-items-center justify-content-start">
                                        <li>竞技荣光套</li>
                                        <li>荣耀世冠套</li>
                                        <li>雷暴套</li>
                                        <li>雷霆套</li>
                                        <li>堕天神套</li>
                                        <li>幻灵套</li>
                                        <li>夜魔套</li>
                                        <li>电竞装甲</li>
                                    </ul>
                                </div>
                                <div class="other_search">
                                    <ul>
                                        <li>雷霆王者套</li>
                                        <li>幻兽套</li>
                                        <li>神工天巧套装</li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="page-main">
                <div class="top">
                    <div class="top-left">
                        <span class="sort">综合排序</span>
                        <div class="time">
                            <span>发布时间</span>
                            <img src="./images/sort1.png" alt="">
                        </div>
                        <div class="price-label">
                            <span>价格</span>
                            <img src="./images/sort1.png" alt="">
                        </div>
                    </div>
                    <div class="top-right">
                        <span class="add-time">上架时间</span>
                        <span class="server">服务保障</span>
                    </div>
                </div>
                <ul class="game-list">
                    <li class="game-item">
                        <div class="game-item-left">
                            <img src="./images/game01.jpeg">
                            <div>
                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                </a>
                                <div class="area">
                                    游戏区服：
                                    <span>天涯明月刀-青龙乱舞长生剑</span>
                                </div>
                                <span class="price">￥99999</span>
                            </div>
                        </div>
                        <div class="time">2023-11-13 12:34:43</div>
                        <div class="right-box">
                            <div>
                                <img src="./images/kf_01.png" alt="">
                                <span>专属客服</span>
                            </div>
                            <div>
                                <img src="./images/bp.png" alt="">
                                <span>找回包赔</span>
                            </div>
                            <div>
                                <img src="./images/hs2.png" alt="">
                                <span>极速回收</span>
                            </div>
                        </div>
                    </li>
                    <li class="game-item">
                        <div class="game-item-left">
                            <img src="./images/game01.jpeg">
                            <div>
                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                </a>
                                <div class="area">
                                    游戏区服：
                                    <span>天涯明月刀-青龙乱舞长生剑</span>
                                </div>
                                <span class="price">￥99999</span>
                            </div>
                        </div>
                        <div class="time">2023-11-13 12:34:43</div>
                        <div class="right-box">
                            <div>
                                <img src="./images/kf_01.png" alt="">
                                <span>专属客服</span>
                            </div>
                            <div>
                                <img src="./images/bp.png" alt="">
                                <span>找回包赔</span>
                            </div>
                            <div>
                                <img src="./images/hs2.png" alt="">
                                <span>极速回收</span>
                            </div>
                        </div>
                    </li>
                    <li class="game-item">
                        <div class="game-item-left">
                            <img src="./images/game01.jpeg">
                            <div>
                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                </a>
                                <div class="area">
                                    游戏区服：
                                    <span>天涯明月刀-青龙乱舞长生剑</span>
                                </div>
                                <span class="price">￥99999</span>
                            </div>
                        </div>
                        <div class="time">2023-11-13 12:34:43</div>
                        <div class="right-box">
                            <div>
                                <img src="./images/kf_01.png" alt="">
                                <span>专属客服</span>
                            </div>
                            <div>
                                <img src="./images/bp.png" alt="">
                                <span>找回包赔</span>
                            </div>
                            <div>
                                <img src="./images/hs2.png" alt="">
                                <span>极速回收</span>
                            </div>
                        </div>
                    </li>
                    <li class="game-item">
                        <div class="game-item-left">
                            <img src="./images/game01.jpeg">
                            <div>
                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                    【辽宁大区-北部】【可二次】【穿越火线】【辽宁大区-北部】战区:北部战区/游戏大区:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:辽宁大区/英雄武器数量:39/王者武器数量:3/可否排位:
                                </a>
                                <div class="area">
                                    游戏区服：
                                    <span>天涯明月刀-青龙乱舞长生剑</span>
                                </div>
                                <span class="price">￥99999</span>
                            </div>
                        </div>
                        <div class="time">2023-11-13 12:34:43</div>
                        <div class="right-box">
                            <div>
                                <img src="./images/kf_01.png" alt="">
                                <span>专属客服</span>
                            </div>
                            <div>
                                <img src="./images/bp.png" alt="">
                                <span>找回包赔</span>
                            </div>
                            <div>
                                <img src="./images/hs2.png" alt="">
                                <span>极速回收</span>
                            </div>
                        </div>
                    </li>
                    <li class="game-item">
                        <div class="game-item-left">
                            <img src="./images/game01.jpeg">
                            <div class="left-title-box">
                                <a href="javaScript:;" class="game-title t-ellipsis-2">
                                    【辽宁大区-北部】【可二次】【穿越火线】
                                </a>
                                <div class="area">
                                    游戏区服：
                                    <span>天涯明月刀-青龙乱舞长生剑</span>
                                </div>
                                <span class="price">￥99999</span>
                            </div>
                        </div>
                        <div class="time">2023-11-13 12:34:43</div>
                        <div class="right-box">
                            <div>
                                <img src="./images/kf_01.png" alt="">
                                <span>专属客服</span>
                            </div>
                            <div>
                                <img src="./images/bp.png" alt="">
                                <span>找回包赔</span>
                            </div>
                            <div>
                                <img src="./images/hs2.png" alt="">
                                <span>极速回收</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 分页器 -->
                <div id="pagination_self"></div>
            </div>
            <!-- 底部 -->
            <div class="site-footer">
                <div class="layout-1226">
                    <div class="footer-service">
                        <ul>
                            <li>
                                <img src="./images/aq.png" alt="">
                                <div class="right">
                                    <h3>诚信安全</h3>
                                    <span>权威认证,安全便捷</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/hs1.png" alt="">
                                <div class="right">
                                    <h3>急速回收</h3>
                                    <span>不玩回收,玩腻换号</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/kf_01.png" alt="">
                                <div class="right">
                                    <h3>专属客服</h3>
                                    <span>1对1客服,优质服务</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/game.png" alt="">
                                <div class="right">
                                    <h3>精品账号</h3>
                                    <span>各种账号,应有尽有</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!-- 底部声明 -->
        <div class="site-info">
            <div class="layout-1226">
                <!-- 声明文字 -->
                <div>
                    <p>
                        <a href="javaScript:;">关于我们</a>
                        <span>|</span>
                        <a href="javaScript:;">联系我们</a>
                        <span>|</span>
                        <a href="javaScript:;">隐私政策</a>
                        <span>|</span>
                        <a href="javaScript:;">政务协议</a>
                        <span>|</span>
                        <a href="javaScript:;">帮助中心</a>
                    </p>
                    <p>
                        <a href="javaScript:;">备案号：xxxxxxxxxx</a>
                        <a href="javaScript:;">公司名称：江苏辉光网络科技有限公司</a>
                        <a href="javaScript:;">© 版权所有</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</body>

<script>
    // 使用
    var fy = document.getElementById("pagination_self");
    paginationself(fy, {
        pageInfo: {
            pageNum: 2,
            totalPage: 25
        }
    }, (nowPage) => {
        //此为回调函数,可省略~
        console.log("当前显示的页为", nowPage);
    });
    //等同于
    // paginationself(fy,{});


    // 筛选条件展开收起
    $(function () {
        var search1 = $('#searchPanel .subsearch').find('.search-1');
        var other_search = $('#searchPanel .subsearch').find('.other_search');
        // search1.click(function () {
        //     //若状态是展开,则收起,反之,则展开
        //     other_search.slideToggle()
        // })

        search1.each(function (i) {
            $(this).click(function () {
                other_search.eq(i).slideToggle();
            })
        })
    })

    // 展开收起按钮样式切换
    $(function () {
        $("#searchPanel .search-1").click(function () {
            if ($(this).hasClass('rotate')) { //点击箭头旋转90度
                $(this).removeClass('rotate')
                $(this).addClass('rotate1')
            } else {
                $(this).removeClass('rotate1')
                $(this).addClass('rotate')
            }
        })
    });
</script>

</html>